import React, { Component } from 'react'
import List from './components/List'
import Tab from './components/Tab'

export default class LayOut extends Component {
  constructor(props) {
    super(props)
    this.state = {
      todos: [
        {
          id: 1,
          task: '任务一',
          flag: false //false 任务未完成
        }
      ]
    }
  }

  delTodos = index => {
    this.setState(({ todos }) => {
      todos.splice(index, 1)
      return { todos }
    })
  }

  addTodos = (val) => {
    this.setState(({ todos }) => {
      todos.push({
        id: todos.length + 1,
        task: val,
        flag: false
      })
      return {
        todos
      }
    })
  }
  render () {
    const { todos } = this.state
    return (
      <div>
        <Tab addTodos={this.addTodos} />
        <List todos={todos} delTodos={this.delTodos} />
      </div>
    )
  }
}
